<template>
  <div class="container">
    <div class="header">
      <div class="header-title">供电设备故障预测与健康管理</div>
      <div class="header-right">
        <div class="header-right-item hover pointer" @mouseenter="showDropdown=true" @mouseleave="showDropdown=false">
          <i class="right-item__person-icon" />
          <span class="right-item__person-name">{{ userInfo.username }}</span>
          <i class="right-item__person-arrow el-icon-caret-bottom" />
          <transition name="show-dropdown">
            <div v-show="showDropdown" class="right-dropdown">
              <div class="right-dropdown-item" @click="dialog.visible=true">修改密码</div>
            </div>
          </transition>
        </div>
        <div class="header-right-item hover pointer" @click="logout">
          <i class="right-item__exit-icon" />
          <span class="right-item__exit-text">系统退出</span>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content-left">
        <div v-border.corner class="content-trip">
          <div class="trip-title title-text">跳闸情况</div>
          <div class="trip-inner">
            <div class="trip-table">
              <div class="trip-table-head">
                <div class="trip-table-td" style="width:30px;" />
                <div class="trip-table-td" style="width:90px;">线别</div>
                <div class="trip-table-td" style="flex:1;">
                  <p>变电</p>
                  <p><span>本月</span><span>环比</span></p>
                </div>
                <div class="trip-table-td" style="flex:1;">
                  <p>电力</p>
                  <p><span>本月</span><span>环比</span></p>
                </div>
              </div>
              <div class="trip-table-body">
                <template v-if="trip.length">
                  <el-scrollbar>
                    <div
                      v-for="(item, index) in trip"
                      :key="index"
                      class="trip-table-tr"
                    >
                      <div class="trip-table-td" style="width:30px;">
                        <span class="trip-table-index">{{ index+1 }}</span>
                      </div>
                      <div class="trip-table-td" style="width:90px;">{{ item.lineName }}</div>
                      <div class="trip-table-td" style="flex:1;font-weight:bold;">
                        <span style="float:left;width:50%;">{{ item.bdTripNum }}</span>
                        <span
                          :style="{
                            float: 'left',
                            width: '50%',
                            'text-align': 'left',
                            'padding-left': '5px',
                            'white-space': 'nowrap',
                            color: item.bdRadio > 0 ? '#f42929' : '#2ea15c'
                          }"
                        >
                          <i
                            class="el-icon-back"
                            :style="{
                              'font-size': '14px',
                              visibility: item.bdRadio ? 'visible' : 'hidden',
                              transform: item.bdRadio > 0 ? 'rotate(90deg)' : 'rotate(-90deg)'
                            }"
                          />
                          {{ item.bdRadio ? Math.abs(item.bdRadio.toFixed(3)) * 100 + '%' : '-' }}
                        </span>
                      </div>
                      <div class="trip-table-td" style="flex:1;font-weight:bold;">
                        <span style="float:left;width:50%;">{{ item.dlTripNum }}</span>
                        <span
                          :style="{
                            float: 'left',
                            width: '50%',
                            'text-align': 'left',
                            'padding-left': '5px',
                            'white-space': 'nowrap',
                            color: item.dlRadio > 0 ? '#f42929' : '#2ea15c'
                          }"
                        >
                          <i
                            class="el-icon-back"
                            :style="{
                              'font-size': '14px',
                              visibility: item.dlRadio ? 'visible' : 'hidden',
                              transform: item.dlRadio > 0 ? 'rotate(90deg)' : 'rotate(-90deg)'
                            }"
                          />
                          {{ item.dlRadio ? Math.abs(item.dlRadio.toFixed(3)) * 100 + '%' : '-' }}
                        </span>
                      </div>
                    </div>
                  </el-scrollbar>
                </template>
                <template v-else>
                  <div class="empty">暂无数据</div>
                </template>
              </div>
            </div>
          </div>
        </div>
        <div v-border.corner class="content-defect">
          <div class="defect-title title-text">缺陷情况</div>
          <div class="defect-inner">
            <div class="defect-table">
              <div class="defect-table-head">
                <div class="defect-table-td" style="width: 30px;" />
                <div class="defect-table-td" style="width: 100px;">线别</div>
                <div class="defect-table-td" style="flex: 1">当月发现</div>
                <div class="defect-table-td" style="flex: 1">待处理</div>
                <div class="defect-table-td" style="flex: 1">已逾期</div>
              </div>
              <div class="defect-table-body">
                <template v-if="defect.length">
                  <el-scrollbar>
                    <div
                      v-for="(item, index) in defect"
                      :key="index"
                      class="defect-table-tr"
                    >
                      <div class="defect-table-td" style="width: 30px;">
                        <span class="defect-table-index">{{ index+1 }}</span>
                      </div>
                      <div class="defect-table-td" style="width: 100px;">{{ item.lineName }}</div>
                      <div class="defect-table-td" style="flex: 1;color:#c7871e;">{{ item.findNum }}</div>
                      <div class="defect-table-td" style="flex: 1;color:#22bf47;">{{ item.dealNum }}</div>
                      <div class="defect-table-td" style="flex: 1;color:#f42929;">{{ item.leftOver }}</div>
                    </div>
                  </el-scrollbar>
                </template>
                <template v-else>
                  <div class="empty">暂无数据</div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-middle">
        <div v-border.corner class="content-health">
          <div class="health-title title-text">
            <span>健康综合评价</span>
            <div class="health-items">
              <div
                v-for="(item, index) in healthStatus"
                :key="index"
                class="health-item"
                :style="{background: item.color}"
              >
                {{ item.title }}：<span>{{ item.value }}</span>
              </div>
            </div>
          </div>
          <div class="health-inner">
            <template v-if="health.length">
              <health-assess
                id="health-assess"
                class-name="health-assess"
                :data="health.slice(0, 15)"
                width="100%"
                height="100%"
              />
            </template>
            <template v-else>
              <div class="empty">暂无数据</div>
            </template>
          </div>
        </div>
        <div v-border.corner class="content-maintenance">
          <div class="maintenance-title">
            <div class="maintenance-title-item active">接触网维修状态</div>
            <div class="maintenance-title-item">变电所维修状态</div>
            <div class="maintenance-title-item">电力配电维修状态</div>
            <div class="maintenance-title-right">
              <div class="maintenance-legend-item">
                <i style="background: #f8bb00" />提醒
              </div>
              <div class="maintenance-legend-item">
                <i style="background: #f42929" />超期
              </div>
            </div>
          </div>
          <div class="maintenance-inner">
            <template v-if="maintenance.data.length">
              <el-table border height="100%" :data="maintenance.data">
                <el-table-column class-name="maintenance-line" label="线路" min-width="85px" show-overflow-tooltip align="center" fixed prop="lineName" />
                <el-table-column
                  v-for="(item, index) in maintenance.columns"
                  :key="index"
                  :prop="item.prop"
                  :label="item.label"
                  align="center"
                  min-width="100px"
                >
                  <template slot-scope="{row}">
                    <span class="device-overdue-in" @click="deviceOverdue(row, item.prop, 'linqi')"><a>{{ row[item.prop].adventCount }}</a></span>
                    <span class="device-overdue-out" @click="deviceOverdue(row, item.prop, 'chaoqi')"><a>{{ row[item.prop].overdueCount }}</a></span>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <template v-else>
              <div class="empty">暂无数据</div>
            </template>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div v-border.corner class="content-risk-warning">
          <div class="risk-warning-title">
            <span class="title-text">风险预警</span>
            <div class="risk-warning-title-right">
              共<span style="color:#c7871e;padding: 0 5px;">{{ riskWarning.length }}</span>条
            </div>
          </div>
          <div ref="riskWarning" class="risk-warning-inner">
            <template v-if="riskWarning.length">
              <scroll
                :data="riskWarning"
                :class-option="{limitMoveNum: riskWarningMoveNum, step: 0.5}"
                class="risk-seamless-scroll"
                style="height:100%;overflow:hidden;"
              >
                <div
                  v-for="(item, index) in riskWarning"
                  :key="index"
                  ref="riskWarningItem"
                  :title="item.title.replace(/[<p>|<p/>]/g, '')"
                  class="risk-warning-item"
                >
                  <img src="../../../../assets/images/jjxt/gz-home/warning.png" alt="">
                  <p class="risk-warning-item-text" v-html="item.title.replace(/[<p>|<p/>]/g, '')" />
                </div>
              </scroll>
            </template>
            <template v-else>
              <div class="empty">暂无数据</div>
            </template>
          </div>
        </div>
        <div v-border.corner class="content-defect-prediction">
          <div class="defect-prediction-title title-text">缺陷预测</div>
          <div class="defect-prediction-inner">
            <template v-if="defectPrediction.length">
              <defect-prediction
                id="defect-prediction"
                class-name="defect-prediction"
                :data="defectPrediction"
                width="100%"
                height="100%"
              />
            </template>
            <template v-else>
              <div class="empty">暂无数据</div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <base-dialog
      class="home-pwd-dialog"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      @open="beforeOpenDialog"
      @updateData="updateData"
    >
      <el-form ref="dataForm" :rules="dialog.rules" :model="dialog.form" label-width="140px">
        <el-row>
          <el-form-item label="旧密码：" prop="oldPwd">
            <el-input v-model="dialog.form.oldPwd" type="password" @paste.native.capture.prevent />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="新密码：" prop="newPwd">
            <el-input v-model="dialog.form.newPwd" type="password" @paste.native.capture.prevent />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="再次输入新密码：" prop="newPwdAgain">
            <el-input v-model="dialog.form.newPwdAgain" type="password" @paste.native.capture.prevent />
          </el-form-item>
        </el-row>
      </el-form>
    </base-dialog>
  </div>
</template>

<script>
import {
  getLoginUserIdPath
} from '@/api/gz-home/home';
import { mapGetters } from 'vuex';
import { logout } from '@/api/main';
import { getToken } from '@/utils/auth';
import { jumpToLogin } from '@/utils/public';
import { changePwd } from '@/api/gz-home/dsc/system/user';
import Socket from '@/utils/socket';

import HealthAssess from '../charts/health-assess';
import DefectPrediction from '../charts/defect-prediction';
import Scroll from 'vue-seamless-scroll';
export default {
  name: 'PowerSupplyEquipment',
  components: { HealthAssess, DefectPrediction, Scroll },
  directives: {
    border: {
      inserted(el, binding) {
        el.style.cssText = 'border: 2px solid #152e55; border-radius: 9px;background: rgba(21, 46, 85, 0.3);';

        if (!binding.modifiers.corner) return;
        const position = window.getComputedStyle(el).position;
        if (!position || position === 'static') {
          el.style.position = 'relative';
        }

        const img = require('../../../../assets/images/jjxt/gz-home/home-block-corner.png');
        const ltCorner = document.createElement('img');
        ltCorner.src = img;
        ltCorner.style.cssText = `position: absolute; left: -2px; top: -2px;`;
        el.appendChild(ltCorner);

        const rtCorner = document.createElement('img');
        rtCorner.src = img;
        rtCorner.style.cssText = `position: absolute; right: -2px; top: -2px; transform: rotate(90deg);`;
        el.appendChild(rtCorner);

        const rbCorner = document.createElement('img');
        rbCorner.src = img;
        rbCorner.style.cssText = `position: absolute; right: -2px; bottom: -2px; transform: rotate(180deg);`;
        el.appendChild(rbCorner);

        const lbCorner = document.createElement('img');
        lbCorner.src = img;
        lbCorner.style.cssText = `position: absolute; left: -2px; bottom: -2px; transform: rotate(-90deg);`;
        el.appendChild(lbCorner);
      }
    }
  },
  data() {
    return {
      zoom: document.body.clientWidth / 1920,
      trip: [],
      defect: [],
      maintenance: {
        data: [],
        columns: []
      },
      health: [],
      healthStatus: [
        { status: 1, title: '健康', value: 0, color: '#2ea15c' },
        { status: 2, title: '亚健康', value: 0, color: '#7db32b' },
        { status: 3, title: '轻度病态', value: 0, color: '#c7c11d' },
        { status: 4, title: '中度病态', value: 0, color: '#c7871e' },
        { status: 5, title: '重度病态', value: 0, color: '#c15818' },
        { status: 6, title: '失效', value: 0, color: '#f42929' }
      ],
      riskWarning: [],
      riskWarningMoveNum: 100,
      defectPrediction: [],
      showDropdown: false,
      dialog: {
        title: '修改密码',
        visible: false,
        loading: false,
        form: {},
        rules: {
          oldPwd: [
            { required: true, message: '必填', trigger: 'blur' },
            { max: 10, message: '小于10个字符', trigger: 'blur' },
            { min: 4, message: '大于4个字符', trigger: 'blur' }
          ],
          newPwdAgain: [
            { required: true, message: '必填', trigger: 'blur' },
            { max: 10, message: '小于10个字符', trigger: 'blur' },
            { min: 4, message: '大于4个字符', trigger: 'blur' }
          ],
          newPwd: [
            { required: true, message: '必填', trigger: 'blur' },
            { max: 10, message: '小于10个字符', trigger: 'blur' },
            { min: 4, message: '大于4个字符', trigger: 'blur' }
          ]
        }
      }
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {
    this.getLoginUserIdPath();
    this.initSocket();
  },
  beforeDestroy() {
    this.socket.ws.close();
  },
  methods: {
    // 获取登入人的idPath，最多只精确到段
    getLoginUserIdPath() {
      getLoginUserIdPath().then((response) => {
        this.userIdPath = response.data;
      });
    },
    initSocket() {
      this.socket = new Socket();
      this.socket.open();

      this.socket.addEventListener('onopen', _ => {
        this.socket.sendMessage('PAGE_HEALTH');
      });
      this.socket.addEventListener('PAGE_HEALTH', data => {
        switch (data.key) {
          case 'DEFECT_INFO':
            this.defect = Object.freeze(data.datas);
            break;
          case 'TRIP_INFO':
            this.trip = Object.freeze(data.datas);
            break;
          case 'HEALTH_INFO':
            this.health = Object.freeze(data.datas);
            this.healthStatus.forEach(item => {
              item.value = this.health.filter(child => child.healthStatus === item.status).length;
            });
            break;
          case 'DEVICE_OVER_DUE':
            this.maintenance.columns = Object.freeze(data.datas[0].map.map((item, index) => ({
              label: item.devClassName,
              prop: `devClass${index + 1}`
            })));
            this.maintenance.data = Object.freeze(data.datas.map(item => {
              const data = { lineName: item.lineName };
              item.map.forEach((child, index) => {
                data[`devClass${index + 1}`] = child;
              });
              return data;
            }));
            break;
          case 'WARNING':
            var tempArr = [];
            for (var i in data.datas) {
              for (var j in data.datas[i].units) {
                if (data.datas[i].units[j].idPath === this.userIdPath) {
                  tempArr.unshift(data.datas[i]);
                }
              }
            }
            this.riskWarning = tempArr;
            // this.riskWarning = Object.freeze(data.datas)
            this.$nextTick(_ => {
              if (this.$refs.riskWarningItem && this.$refs.riskWarningItem[0] && this.$refs.riskWarningItem[0].parentNode.offsetHeight > this.$refs.riskWarning.offsetHeight) {
                this.riskWarningMoveNum = this.riskWarning.length;
              }
            });
            break;
          case 'DEFECT_PRED':
            this.defectPrediction = Object.freeze(data.datas);
            break;
        }
      });
    },
    // 退出登录
    logout() {
      logout({ token: getToken() }).then(() => {
        jumpToLogin();
      });
    },
    beforeOpenDialog() {
      this.dialog.form = {};
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate();
      });
    },
    updateData() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          if (this.dialog.form.newPwd !== this.dialog.form.newPwdAgain) {
            this.notifiyError('两次输入新密码不一致!');
            return false;
          }
          this.dialog.loading = true;
          changePwd({
            oldPwd: this.dialog.form.oldPwd,
            newPwd: this.dialog.form.newPwd
          }).then(() => {
            this.notifiySuccess('密码修改成功!');
            this.dialog.loading = false;
            this.dialog.visible = false;
          }).catch(_ => {
            this.dialog.loading = false;
            this.dialog.visible = false;
          });
        }
      });
    },
    deviceOverdue(row, columnKey, type) {
      window.open(`/phm/maintenanceManage/repair/status?bigScreenLineName=${row.lineName}&bigScreenDevClassName=${row[columnKey].devClassName}&bigScreenType=${type}`);
    }
  }
};
</script>

<style lang="scss" scoped>
  .container{
    height: 100%;
    background: #0d1229 url(../../../../assets/images/jjxt/gz-home/big-screen-bg.png) no-repeat center/100% 100%;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: #fff;
    .header{
      height: 66px;
      background: url(../../../../assets/images/jjxt/gz-home/power-supply-header.png) no-repeat center bottom;
      position: relative;
      .header-title{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 34px;
        font-weight: bold;
      }
      .header-right{
        float: right;
        font-size: 18px;
        font-weight: bold;
        color: #5fbdfd;
        .header-right-item{
          float: left;
          height: 66px;
          line-height: 66px;
          color: #508ae2;
          padding: 0 10px;
          position: relative;
          &.hover:hover{
            background: #1a284a;
          }
          &.pointer{
            cursor: pointer;
          }
          .right-item__person-icon{
            position: absolute;
            top: 18px;
            left: -6px;
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url(../../../../assets/images/jjxt/gz-home/home-person-icon.png) no-repeat center 0px;
            background-position: center 0px;
            background-size: cover;
          }
          .right-item__person-name{
            margin: 0 10px;
          }
          .right-item__exit-icon{
            position: absolute;
            top: 22px;
            left: -8px;
            display: inline-block;
            width: 16px;
            height: 16px;
            background: url(../../../../assets/images/jjxt/gz-home/home-exit.png) no-repeat center 0px;
            background-position: center 0px;
            background-size: cover;
          }
          .right-dropdown{
            position: absolute;
            left: 50%;
            top: 100%;
            width: 100%;
            transform: translateX(-50%);
            background: #1a284a;
            color: #508ae2;
            z-index: 9999;
            .right-dropdown-item{
              height: 45px;
              line-height: 45px;
              padding: 0 20px;
              text-align: center;
              border-top: 1px solid #000;
              &:hover{
                background: #132b5a;
                color: #fff;
              }
            }
          }
          .show-dropdown-enter-active,
          .show-dropdown-leave-active {
            transition: all 0.28s;
          }
          .show-dropdown-enter,
          .show-dropdown-leave-active {
            top: 80%;
            opacity: 0;
          }
        }
      }
    }
    .content{
      padding: 10px;
      flex: 1;
      height: 0;
      display: flex;
      .el-scrollbar{
        height: 100%;
        /deep/.el-scrollbar__wrap{
          overflow-x: hidden;
        }
      }
      .title-text{
        font-size: 20px;
        font-weight: bold;
      }
      .empty{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        font-weight: bold;
        color: #394961;
      }
      .content-left{
        width: 400px;
        display: flex;
        flex-direction: column;
        .content-trip{
          height: 370px;
          padding: 15px 15px 0 15px;
          display: flex;
          flex-direction: column;
          .trip-inner{
            flex: 1;
            height: 0;
            .trip-table{
              height: 100%;
              display: flex;
              flex-direction: column;
              .trip-table-head{
                display: flex;
                align-items: center;
                border-bottom: 1px solid rgba($color: #0e2ff8, $alpha: 0.4);
                color: #43aef8;
                p{
                  margin: 3px 0;
                }
                span{
                  float: left;
                  width: 50%;
                  font-size: 14px;
                  border-right: 1px solid #43aef8;
                  &:last-child{
                    border: 0;
                  }
                }
              }
              .trip-table-body{
                flex: 1;
                height: 0;
                position: relative;
              }
              .trip-table-tr{
                display: flex;
                align-items: center;
                border-bottom: 1px dashed rgba($color: #0e2ff8, $alpha: 0.4);
              }
              .trip-table-td{
                text-align: center;
                padding: 7px 0;
                .trip-table-index{
                  display: inline-block;
                  width: 25px;
                  height: 18px;
                  line-height: 18px;
                  text-align: center;
                  font-size: 14px;
                  background: #1168a4;
                  border-radius: 4px;
                }
              }
            }
          }
        }
        .content-defect{
          flex: 1;
          height: 0;
          margin-top: 10px;
          padding: 15px 15px 0 15px;
          display: flex;
          flex-direction: column;
          .defect-inner{
            flex: 1;
            height: 0;
            margin-top: 10px;
            .defect-table{
              height: 100%;
              display: flex;
              flex-direction: column;
              .defect-table-head{
                display: flex;
                align-items: center;
                padding: 10px 0;
                border-bottom: 1px solid rgba($color: #0e2ff8, $alpha: 0.4);
                color: #43aef8;
              }
              .defect-table-body{
                flex: 1;
                height: 0;
                position: relative;
              }
              .defect-table-tr{
                display: flex;
                align-items: center;
                padding: 16px 0;
                border-bottom: 1px dashed rgba($color: #0e2ff8, $alpha: 0.4);
              }
              .defect-table-td{
                text-align: center;
                .defect-table-index{
                  display: inline-block;
                  width: 25px;
                  height: 18px;
                  line-height: 18px;
                  text-align: center;
                  font-size: 14px;
                  background: #1168a4;
                  border-radius: 4px;
                }
              }
            }
          }
        }
      }
      .content-middle{
        flex: 1;
        width: 0;
        margin: 0 10px;
        display: flex;
        flex-direction: column;
        .content-health{
          height: 370px;
          display: flex;
          flex-direction: column;
          .health-title{
            padding: 15px 15px 0;
            .health-items{
              float: right;
              .health-item{
                float: left;
                margin-left: 5px;
                width: 100px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                border-radius: 4px;
                font-size: 14px;
                font-weight: normal;
                span{
                  font-weight: bold;
                }
              }
            }
          }
          .health-inner{
            flex: 1;
            height: 0;
            margin-top: 20px;
            position: relative;
          }
        }
        .content-maintenance{
          flex: 1;
          height: 0;
          margin-top: 10px;
          padding: 5px;
          display: flex;
          flex-direction: column;
          .maintenance-title-item{
            float: left;
            width: 220px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            border-radius: 9px 9px 0 0;
            color: #727982;
            cursor: pointer;
            &.active{
              background: #182648;
              color: #fff;
            }
            &:hover{
              color: #fff;
            }
          }
          .maintenance-title-right{
            float: right;
            line-height: 45px;
            .maintenance-legend-item{
              float: left;
              margin-right: 20px;
              font-size: 14px;
              i{
                display: inline-block;
                width: 6px;
                height: 6px;
                margin-right: 5px;
              }
            }
          }
          .maintenance-inner{
            flex: 1;
            height: 0;
            .el-table{
              border: 1px solid rgba($color: #0e2ff8, $alpha: 0.4);
              background-color: transparent;
              &::before,
              &::after{
                background-color: rgba($color: #0e2ff8, $alpha: 0.4);
              }
              /deep/th{
                padding: 0 !important;
                color: #fff;
                font-weight: normal;
                background-color: #06142f !important;
                border-bottom: 1px solid rgba($color: #0e2ff8, $alpha: 0.4);
                border-right: 1px solid rgba($color: #0e2ff8, $alpha: 0.4);
                .cell{
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  padding: 7px 0;
                }
              }
              /deep/tr{
                font-size: 14px;
                color: #fff;
                background-color: transparent;
                td{
                  padding: 0 !important;
                  border-bottom: 1px solid rgba($color: #0e2ff8, $alpha: 0.4);
                  border-right: 1px solid rgba($color: #0e2ff8, $alpha: 0.4);
                  &.maintenance-line{
                    background: #182648;
                  }
                  .cell{
                    padding: 7px 5px !important;
                  }
                  .device-overdue-in,
                  .device-overdue-out{
                    float: left;
                    width: 50%;
                    height: 100%;
                    padding: 0 0 0 5px;
                    text-align: left;
                    color: #f42929;
                    cursor: pointer;
                    &:hover{
                      a{
                        text-decoration: underline;
                      }
                    }
                  }
                  .device-overdue-in{
                    color: #f8bb00;
                    text-align: right;
                    padding: 0 5px 0 0;
                    position: relative;
                    &::after{
                      content: '';
                      position: absolute;
                      width: 1px;
                      height: 16px;
                      right: 0;
                      top: 4px;
                      background: #4b4b4b;
                    }
                  }
                }
                &.hover-row{
                  td{
                    background-color: transparent !important;
                  }
                }
              }
              /deep/.el-table__fixed{
                &::before{
                  background-color: transparent;
                }
              }
              /deep/.el-table__body-wrapper{
                &::-webkit-scrollbar{
                  width: 8px;
                  height: 8px;
                  background-color: transparent;
                }
                &::-webkit-scrollbar-thumb{
                  background-color: rgba(144, 147, 153, 0.3);
                  height: 20px;
                  border: 0;
                  &:hover{
                    cursor: pointer;
                  }
                }
                &::-webkit-scrollbar-track{
                  background-color: transparent;
                  border: 0;
                }
                &::-webkit-scrollbar-corner{
                  display: none;
                }
              }
            }
          }
        }
      }
      .content-right{
        width: 400px;
        display: flex;
        flex-direction: column;
        .content-risk-warning{
          height: 370px;
          padding: 15px 15px 0;
          display: flex;
          flex-direction: column;
          .risk-warning-title-right{
            float: right;
            font-size: 16px;
            color: #43aef8;
          }
          .risk-warning-inner{
            flex: 1;
            height: 0;
            margin-top: 10px;
            position: relative;
            .risk-warning-item{
              display: flex;
              align-items: center;
              border-bottom: 1px dashed rgba($color: #0e2ff8, $alpha: 0.4);
              .risk-warning-item-text{
                line-height: 30px;
                margin-left: 15px;
                padding: 5px 0;
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }
          }
        }
        .content-defect-prediction{
          flex: 1;
          height: 0;
          margin-top: 10px;
          padding: 15px 15px 0;
          display: flex;
          flex-direction: column;
          .defect-prediction-inner{
            flex: 1;
            height: 0;
            margin-top: 20px;
            position: relative;
          }
        }
      }
    }
  }
  .home-pwd-dialog{
    /deep/.el-dialog{
      background: #122854;
      .el-dialog__header{
        background: #122854;
        border-bottom-color: #3585d2;
      }
      .el-dialog__body{
        .el-form-item__label{
          color: #fff;
        }
        .el-input__inner{
          background-color: transparent;
          border-color: #3585d2;
          color: #fff;
        }
      }
    }
  }
</style>
